/**
 * 手动登记 弹窗
 * @author xiaoxujs
 */

import { DatePicker, Form, Input, message, Modal, Popover, Select } from "antd";
import { FC, useState } from "react";
import { IBaseEntryVoucherAddForm, IBaseEntryVoucherAddParams } from "../../../../../type/Jinchu";
import { ISelectList } from "../../../../../type/antd";
import { postBaseEntryVoucherAdd } from "../../../api";
import dayjs from "dayjs";
import { licensePlateAbbreviations } from "../../../../../assets/data";
import { ShengDiv, ShengTanchaung } from "../../../../../assets/style/ShengTanchaung";

const Shoudongdengji: FC<{
    open: boolean,
    carColorList: ISelectList[],
    handleCallback: () => void
}> = ({
    open,
    carColorList,
    handleCallback
}) => {
        const [form] = Form.useForm<IBaseEntryVoucherAddForm>();
        const { validateFields, resetFields } = form;
        const [carSheng, setCarSheng] = useState('陕'); // 省
        const [carShengShow, setCarShengShow] = useState(false); // 省弹窗显示与否

        const handleOk = () => {
            validateFields().then(values => {
                let params = {
                    ...values,
                    licensePlate: carSheng + values.licensePlate,
                    entryDate: dayjs(values.entryDate).format('YYYY-MM-DD')
                }
                postBaseEntryVoucherAdd(params).then((res: any) => {
                    if (res.code === 20000) {
                        message.success('手动登记完成');
                        resetFields();
                        handleCallback()
                    } else {
                        message.error(res.msg)
                    }
                })
            })
        };

        const handleCancel = () => {
            resetFields();
            handleCallback()
        };
        const ShengHtml = <ShengTanchaung>
            {
                licensePlateAbbreviations.map((item) => {
                    return <div
                        key={item}
                        className={carSheng === item ? 'li-car active' : 'li-car'}
                        onClick={() => {
                            setCarSheng(item);
                        }}
                    >
                        {item}
                    </div>
                })
            }
        </ShengTanchaung>

        const prefixSelector = () => {
            return (<div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item name={['plateColor']} noStyle>
                    <Select
                        style={{ width: '6.5rem' }}
                        options={carColorList}>
                    </Select>
                </Form.Item>
                <Popover content={ShengHtml} trigger="click" onOpenChange={(open) => {
                    setCarShengShow(open)
                }}>
                    <ShengDiv>
                        <span style={{ color: !carShengShow ? 'rgba(0, 0, 0, 0.88)' : 'rgba(0, 0, 0, 0.45)' }} >{carSheng}</span><span className="iconfont" style={{ fontSize: '1.2rem', color: 'rgba(0, 0, 0, 0.88)' }}>&#xe661;</span>
                    </ShengDiv>
                </Popover>

            </div>

            );
        }
        return <Modal title="手动登记" open={open} onOk={handleOk} onCancel={handleCancel}>
            <Form
                name="complex-form"
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ plateColor: '黄' }}

            >
                <Form.Item<IBaseEntryVoucherAddParams >
                    name="licensePlate"
                    label='车牌号'
                    rules={[
                        { required: true, message: '请输入车牌号!' },
                    ]}
                >
                    <Input style={{ width: '27.3rem' }}
                        placeholder="请输入车牌号"
                        addonBefore={prefixSelector()}
                        onBlur={(e) => {
                            form.setFieldValue('licensePlate', e.target.value.toUpperCase())
                        }}
                        
                    />
                </Form.Item>
                <Form.Item<IBaseEntryVoucherAddParams >
                    name="driverPhone"
                    label='司机电话'
                    rules={[
                        { required: true, message: '请输入司机电话!' },
                        { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号!" },
                    ]}
                >
                    <Input placeholder="请输入司机电话" style={{ width: '27.3rem' }} />
                </Form.Item>
                <Form.Item<IBaseEntryVoucherAddParams >
                    name="entryDate"
                    label='允许入矿日期'
                    rules={[
                        { required: true, message: '请选择允许入矿日期!' }
                    ]}
                >
                    <DatePicker style={{ width: '27.3rem' }} />
                </Form.Item>
            </Form>
        </Modal>
    }

export default Shoudongdengji;